<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 如果当前列表是循环出来，并且有事件  函数就需要传参-->
            <li v-for="item in list">
                <input v-model="item.check" type="checkbox">
                商品名称: {{ item.title }}--
                商品价格: {{ item.price }}--
                <button @click="delItem(item)">减</button>
                商品数量: {{ item.count }}
                <button @click="addItem(item)">加</button>

                --
                商品小计: {{ item.count * item.price }}
            </li>
        </ul>

        <div>
            <p>
                总数量：{{ allCount }}
            </p>
            <p>
                总计：{{ allPrice }}
            </p>
            <p>
                全选 <input @change="changeFlag" v-model="allCheck" type="checkbox">
            </p>
        </div>
    </div>

    <script src="./vue.min.js"></script>
    <script>
         new Vue({
            el: "#app",
            data: {
                allCheck: false,
                list: [
                    {
                        title: "华为",
                        price: 100,
                        count: 0,
                        check: false
                    },
                    {
                        title: "小米",
                        price: 200,
                        count: 0,
                        check: false
                    },
                    {
                        title: "苹果",
                        price: 300,
                        count: 0,
                        check: false
                    }
                ]
            },
            // 监听
            watch: {
                list: {
                    deep: true,
                    // handler别写成箭头函数，避免this问题
                    // handler: () => {
                    //     console.log(this)
                    // }
                    handler(value) {
                       this.allCheck = value.every(item => item.check)
                    }
                }
            },
            // 缓存  
            computed: {
                // 总数量

                // 5   6   7

                // 0 + 5
                //  5 + 6
                //  11 + 7
                allCount() {
                    return this.list.reduce((next, prev) => {
                        // 如果是选中
                        if (prev.check) {
                            return next + prev.count
                        } else {
                            return next
                        }   
                    }, 0)
                },
                // 总价格
                allPrice() {
                    return this.list.reduce((next, prev) => {
                        if (prev.check) {
                            return next + prev.count * prev.price
                        } else {
                            return next
                        }
                    }, 0)
                }
            },
            methods: {
                addItem(item) {
                    // 数量 + 1
                    item.count += 1
                },
                delItem(item) {
                    // 数量 - 1
                    item.count -= 1
                },
                // 全选
                changeFlag() {
                    this.list.forEach(item => {
                        item.check = this.allCheck
                    })
                }
            }
        })

        // 0 + 1
        // 1 + 1
        // 2 + 2
        // 4 + 3

        // const arr = [1, 2, 3, 4, 5]

        // // let sum = 0
        // // arr.forEach(item => {
        // //     sum += item
        // // })
        // // console.log(sum)

        // // reduce(callback, 初始值)
        // let all = arr.reduce((next, prev, index, arr) => {
        //     // next  当前值(读去retrun结果)
        //     // prev  上一次的值
        //     // index 下标
        //     // arr  原数组
        //     return next + prev
        // }, 0)

        // console.log(all)
    </script>
</body>
</html>